import {
  School as SchoolIcon,
  Code as CodeIcon,
  Build as BuildIcon,
  Assignment as AssignmentIcon,
} from '@mui/icons-material';
import {
  Typography,
  Container,
  Paper,
  Box,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import React from 'react';

const Home: React.FC = () => {
  const sections = [
    {
      title: 'JavaScript基础',
      description: '学习JavaScript的核心概念，包括变量、函数、对象和异步编程。',
      icon: <SchoolIcon />,
    },
    {
      title: 'React基础',
      description: '掌握React的基本概念，包括组件、JSX、Props和State。',
      icon: <CodeIcon />,
    },
    {
      title: 'React进阶',
      description: '深入学习React的高级特性，包括Hooks、状态管理和路由。',
      icon: <BuildIcon />,
    },
    {
      title: '实战项目',
      description: '通过实际项目练习，巩固所学知识。',
      icon: <AssignmentIcon />,
    },
  ];

  return (
    <Container maxWidth="lg">
      <Box sx={{ mt: 4, mb: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom>
          欢迎来到React学习教程
        </Typography>
        <Typography variant="h6" color="text.secondary" paragraph>
          这是一个交互式的React学习平台，我们将从JavaScript基础开始，
          逐步深入React的世界。每个概念都配有详细的解释和实际的代码示例。
        </Typography>
      </Box>

      <Box sx={{ mt: 4 }}>
        <Typography variant="h4" gutterBottom>
          学习路径
        </Typography>
        <List>
          {sections.map((section, index) => (
            <Paper key={index} elevation={1} sx={{ mb: 2, overflow: 'hidden' }}>
              <ListItem sx={{ py: 2 }}>
                <ListItemIcon>{section.icon}</ListItemIcon>
                <ListItemText
                  primary={<Typography variant="h6">{section.title}</Typography>}
                  secondary={section.description}
                />
              </ListItem>
            </Paper>
          ))}
        </List>
      </Box>

      <Box sx={{ mt: 4 }}>
        <Typography variant="h4" gutterBottom>
          开始学习
        </Typography>
        <Typography paragraph>
          建议按照学习路径的顺序进行学习。每个部分都包含理论知识和实践练习，
          帮助你更好地理解和掌握相关概念。点击左侧菜单开始你的学习之旅吧！
        </Typography>
      </Box>
    </Container>
  );
};

export default Home;
